<template>
  <div style="margin-top: 65px">
    <sunDrawerBack show="show_commentList" :parent="this.$parent.$parent" />
    <el-page-header class="sun-el-page-header" :content="title" @back="goBack" />
    <el-card class="sun-el-card" style="margin-bottom: 94px !important;">
      <div style="margin-bottom: 14px;font-size: 16px;">
        <span v-for="(grade, index) in grade_or_score" :key="index" style="margin-right: 20px;">
          <span v-if="!grade.type">{{ grade.title }}：{{ currentItem[grade.key] }}</span>
          <span v-else>
            {{ grade.title }}：
            <el-select v-model="currentItem[grade.key]" size="mini" style="width: 150px;height: 30px;">
              <el-option
                v-for="item in grade.data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </span>
        <div v-if="is_self_evaluation_grade && source === 'old'" style="margin-top: 14px;font-size: 16px;">
          <span v-for="(teacher, index) in currentItem.evaluation_course_teachers" :key="index" style="margin-right: 20px;">
            {{ teacher.teacher.name }}:
            <el-select v-model="currentItem.self_evaluation_grade_array[index].self_evaluation_grade" size="mini" style="width: 150px;height: 30px;">
              <el-option
                v-for="item in gradedata"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </span>
        </div>
      </div>
      <div ref="input1" class="flex_between" style="height: 30vh;border-right: 1px solid #DCDFE6;">
        <div v-for="item in list" :key="item.id" :style="{ 'width': (100 / list.length) + '%' }" style="border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;">
          <div style="color: #FFFFFF; background: #2693FF;line-height: 40px;padding: 0 14px;">
            {{ `【${item.teacher.name}】评审意见` }}
          </div>
          <div class="flex_center_align flex_between" style="line-height: 40px;padding: 0 14px;border-bottom: 1px solid #DCDFE6;">
            <div v-if="source === 'new'" style="width: 100%;padding-right: 14px;">
              <span v-if="nextIsPrelectionEvaluation || hasPrelectionEvaluation">
                {{ `是否通过：${item.consent === 1 ? '通过' : '不通过'}` }}
              </span>
              <span v-else>
                {{ `是否同意：${item.consent === 1 ? '同意' : '不同意'}` }}
              </span>
            </div>
            <div v-if="source === 'old'" class="flex_center_align" style="width: 100%;padding-right: 14px;font-weight: bold;">
              <div>
                {{ evaluation_course_group_assessment_result_show_method === 'grade' ? '等级：' : '评分：' }}
                {{ item[evaluation_course_group_assessment_result_show_method] }}
              </div>
              <div v-if="evaluation_course_group_assessment_result_show_method === 'grade' && publicRoute === 'admin'" style="margin-left: 30px">
                {{ '得分：' }} {{ item.score }}
              </div>
            </div>
            <span v-for="btn in adopt_evaluation_comment_btn" :key="btn.api">
              <el-button :type="item.checked ? 'primary' : ''" size="mini" @click="adoptClick(item)">
                {{ item.checked ? '已采纳' : btn.name }}
              </el-button>
            </span>
          </div>
          <div class="indicator-style indicator-stylea">
            <el-input v-if="source === 'new'" v-model="item.expert_comment" :readonly="(adopt_evaluation_comment_btn.length === 0 || publicRoute === 'user') ? false : true" :style="{'height': input1 + 'px  !important'}" class="inputbox1" type="textarea" />
            <el-input v-if="source === 'old'" v-model="item.expert_comment" :readonly="!editComment.every_comment" :style="{'height': input1 + 'px  !important'}" class="inputbox1" type="textarea" />
          </div>
        </div>
      </div>
      <!-- 说课 -->
      <div v-if="!nextIsPrelectionEvaluation && hasPrelectionEvaluation" ref="input1" class="flex_between" style="height: 30vh;border-right: 1px solid #DCDFE6;">
        <div v-for="item in list" :key="item.id" :style="{ 'width': (100 / list.length) + '%' }" style="border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;">
          <div style="color: #FFFFFF; background: rgba(0, 196, 255, 1);line-height: 40px;padding: 0 14px;">
            {{ `【${item.teacher.name}】说课意见` }}
          </div>
          <div class="flex_center_align flex_between" style="line-height: 40px;padding: 0 14px;border-bottom: 1px solid #DCDFE6;">
            <div v-if="source === 'new'" style="width: 100%;padding-right: 14px;">
              <span v-if="item.prelection_result === null">{{ '是否通过：无' }}</span>
              <span v-if="item.prelection_result === 0">{{ '是否通过：不通过' }}</span>
              <span v-if="item.prelection_result === 1">{{ '是否通过：通过' }}</span>
            </div>
          </div>
          <div class="indicator-style indicator-stylea">
            <el-input v-if="source === 'new'" v-model="item.prelection_expert_comment" :readonly="(adopt_evaluation_comment_btn.length === 0 || publicRoute === 'user') ? false : true" :style="{'height': input1 + 'px  !important'}" class="inputbox1" type="textarea" />
          </div>
        </div>
      </div>
      <span v-if="source === 'new'">
        <div v-if="comment !== ''" ref="input2" style="height: 49vh;border-right: 1px solid #DCDFE6;">
          <div style="color: #66B3FF;line-height: 40px;width: 100%;padding: 0 14px;border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;">综合评审意见</div>
          <div class="indicator-style indicator-styleb" style="border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;">
            <el-input v-model="comment" placeholder="请输入综合意见" :style="{'height': input2 + 'px  !important'}" type="textarea" />
          </div>
        </div>
      </span>
      <span v-if="source === 'old'">
        <div v-if="comment !== '' && publicRoute === 'admin'" ref="input2" style="height: 49vh;border-right: 1px solid #DCDFE6;">
          <div style="color: #66B3FF;line-height: 40px;width: 100%;padding: 0 14px;border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;">综合评审意见</div>
          <div class="indicator-style indicator-styleb" style="border-left: 1px solid #DCDFE6;border-bottom: 1px solid #DCDFE6;">
            <el-input v-model="comment" :readonly="!editComment.overall_comment" :style="{'height': input2 + 'px  !important'}" type="textarea" />
          </div>
        </div>
      </span>
    </el-card>
    <div class="sun-drawer-base-btn">
      <el-button size="mini" @click="goBack">取 消</el-button>
      <el-button v-for="btn in footerBtn" :key="btn.api" :disabled="btn.model === 'adopt_evaluation_comment'" type="primary" size="mini" @click="dialogOperationsBnt(btn, 'submitOpinions')">
        {{ btn.name }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { $tooltips } from '@/sun-components/SunMsg.js'
import SunDrawerBack from '@/sun-components/SunDrawerBack'
import { mapGetters } from 'vuex'
export default {
  name: 'CommentList',
  components: { SunDrawerBack },
  props: {
    hasPrelectionEvaluation: {
      type: Boolean,
      default: false
    },
    nextIsPrelectionEvaluation: {
      type: Boolean,
      default: false
    },
    source: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default() {
        return '复评备案'
      }
    },
    editComment: {
      type: Object,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      footerBtn: [],
      list: [],
      comment: '',
      input1: 0,
      input2: 0,
      adopt_evaluation_comment_btn: [],
      gradedata: [
        { label: 'A', value: 'A' },
        { label: 'B', value: 'B' },
        { label: 'C', value: 'C' },
        { label: 'D', value: 'D' }
      ]
    }
  },
  computed: {
    show_commentList() {
      return this.$parent.$parent.show_commentList
    },
    evaluation_course_group_assessment_result_show_method() {
      return this.$parent.$parent.evaluation_course_group_assessment_result_show_method
    },
    currentItem() {
      return this.$parent.$parent.currentItem
    },
    grade_or_score() {
      return this.$parent.$parent.grade_or_score
    },
    is_self_evaluation_grade() {
      return this.$project_config.project_config.teacher ? this.$project_config.project_config.teacher.self_evaluation_grade : false
    },
    ...mapGetters([
      'publicRoute'
    ])
  },
  watch: {
    show_commentList: {
      handler: function(show) {
        if (show) {
          this.requestData()
          setTimeout(() => {
            this.$set(this, 'input1', this.$refs.input1.offsetHeight - 90)
          }, 500)
        }
      }
    },
    list: {
      handler: function(data) {
        const _that = this
        _that.comment = ''
        let information = ''
        let prelection = ''
        if (_that.hasPrelectionEvaluation) {
          information = '----------资料评审意见----------' + '\r\n\r\n'
          prelection = '----------说课评审意见----------' + '\r\n\r\n'
        }
        if (_that.nextIsPrelectionEvaluation) {
          information = '----------资料评审意见----------' + '\r\n\r\n'
        }
        if (data) {
          data.forEach((item, index) => {
            if (item.checked || !_that.adopt_evaluation_comment_btn.length) {
              // _that.comment = _that.comment + '====================' + '\r\n' + item.expert_comment + '\r\n\r\n'
              if (!index) {
                information += item.expert_comment + '\r\n\r\n'
              } else {
                information += '====================' + '\r\n' + item.expert_comment + '\r\n\r\n'
              }
              if (!index) {
                prelection += item.prelection_expert_comment + '\r\n\r\n'
              } else {
                prelection += '====================' + '\r\n' + item.prelection_expert_comment + '\r\n\r\n'
              }
              if (!_that.nextIsPrelectionEvaluation && _that.hasPrelectionEvaluation) {
                _that.comment = information + prelection
              } else {
                _that.comment = information
              }
              _that.$parent.$parent.currentItem['expert_comment'] = _that.comment
              setTimeout(() => {
                _that.$set(this, 'input2', this.$refs.input2.offsetHeight - 40)
              }, 500)
            }
          })
        }
      },
      deep: true
    }
  },
  created() {
    if (this.show_commentList) {
      this.requestData()
      setTimeout(() => {
        this.$set(this, 'input1', this.$refs.input1.offsetHeight - 90)
      }, 500)
    }
  },
  methods: {
    async adoptClick(item) {
      const _that = this
      _that.comment = ''
      let information = ''
      let prelection = ''
      if (_that.hasPrelectionEvaluation) {
        information = '----------资料评审意见----------' + '\r\n\r\n'
        prelection = '----------说课评审意见----------' + '\r\n\r\n'
      }
      if (_that.nextIsPrelectionEvaluation) {
        information = '----------资料评审意见----------' + '\r\n\r\n'
      }
      item.checked = !item.checked
      _that.list.forEach((adopt, index) => {
        if (adopt.checked) {
          if (!index) {
            information += adopt.expert_comment + '\r\n\r\n'
          } else {
            information += '====================' + '\r\n' + adopt.expert_comment + '\r\n\r\n'
          }
          if (!index) {
            prelection += adopt.prelection_expert_comment + '\r\n\r\n'
          } else {
            prelection += '====================' + '\r\n' + adopt.prelection_expert_comment + '\r\n\r\n'
          }
          if (!_that.nextIsPrelectionEvaluation && _that.hasPrelectionEvaluation) {
            _that.comment = information + prelection
          } else {
            _that.comment = information
          }
          // _that.comment = _that.comment + '====================' + '\r\n' + adopt.expert_comment + '\r\n\r\n'
        }
      })
      _that.comment = information + prelection
      console.log('_that.comment', _that.comment)
      // comment
      _that.$parent.$parent.currentItem['expert_comment'] = _that.comment
      setTimeout(() => {
        _that.$set(this, 'input2', this.$refs.input2.offsetHeight - 40)
      }, 500)
    },
    async requestData() {
      const _that = this
      const btn = this.$parent.$parent.currentBtn
      btn.children?.forEach(item => {
        if (item.model === 'adopt_evaluation_comment') { // 获取采纳意见按钮
          _that.adopt_evaluation_comment_btn = [item]
        }
      })
      if (btn.model === 'submit_results' || btn.model === 'pass_complete') { // 确保接口的准确性
        _that.footerBtn = btn.children
        this.$parent.$parent.currentItem.experts.forEach(checked => {
          _that.$set(checked, 'checked', false)
        })
        _that.list = this.$parent.$parent.currentItem.experts
        console.log('this.$parent.$parent.currentItem', this.$parent.$parent.currentItem)
      } else {
        $tooltips('请求终止,流程错误!')
      }
    },
    async dialogOperationsBnt(btn, type) {
      const experts_comment = []
      this.list.forEach(item => {
        experts_comment.push({
          'id': item.id,
          'expert_comment': item.expert_comment
        })
      })
      this.$parent.$parent.currentItem['experts_comment'] = experts_comment
      this.$parent.$parent.currentItem['expert_comment'] = this.comment
      this.$parent.$parent.dialogOperationsBnt(btn, type)
    },
    async goBack() {
      this.$parent.$parent.setShowHidden(['show_commentList'])
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
  .indicator-style  ::v-deep {
    &.el-textarea__inner{
      border: 0 !important;
      border-radius: 0px !important;
      box-shadow: none !important;
      text-align: justify;
      &::-webkit-scrollbar{
        width: 0;
        height: 0;
      }
    }
  }
  .indicator-stylea ::v-deep {
    &.el-textarea__inner{
      position: absolute;
      height: 100% !important;
    }
  }
  .indicator-styleb ::v-deep {
    &.el-textarea__inner{
      position: absolute;
      height: 100% !important;
    }
  }
</style>
